<template>
  <div class="page-goods df">

    <div class="navs fn">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item @click="handleClick" v-for="item in navList" :key="item" :title="item" />
      </van-sidebar>
    </div>
    <div class="f1 right-container">
      <!-- 商品列表 -->
      <div class="goods-list">
        <!-- 商品 -->
        <div v-for="item in goodsList" :key="item.name" class="good-item">
          <h3 class="title">{{ item.name }}</h3>
          <!-- 食品列表 -->
          <div class="foods-list">
            <!-- 食品 -->
            <van-card v-for="subItem in item.foods" :key='subItem.id'  :price="subItem.price"
              :desc="subItem.goodsDesc" :title="subItem.name" :thumb="subItem.imgUrl">
              <template #footer>
                <van-stepper v-model="subItem.count" :min='0' default-value='0'
                  theme="round" button-size="22" disable-input />
              </template>
            </van-card>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
//
import { mapGetters, mapState } from "vuex";
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      activeKey: 0,
      heightList: [],
      loading : false,
    };
  },
  mounted() { },
  methods: {
    //点击菜单
    handleClick(index) {
      this.activeKey = index;
      // 获取nodeLIst的节点
      const goodsNode = document.querySelectorAll('.good-item');
      // 右边滚动条滚动
      this.bs2.scrollToElement(goodsNode[this.activeKey], 600)

      this.loading = true;
    },

    renderScroll() {
      this.$nextTick(() => {
        this.bs1 = new BScroll(".navs", {
          click: true,
        });

        this.bs2 = new BScroll(".right-container", {
          click: true,
          probeType: 3,
        });

        const goodsNode = document.querySelectorAll('.good-item');

        goodsNode.forEach((el) => {
          this.heightList.push(el.clientHeight);
        })

        this.bs2.on('scroll', ({y}) => {
          console.log('this.loading',this.loading);
          if(this.loading) return;
          let Y =  Math.abs(y)

          this.heightList.reduce((total,cur,index) =>{
            if(Y > total  &&  Y < total + cur){
              this.activeKey = index;
            }
            return total + cur
          },0)
        });

        // bs2滚动结束把loading设置为false
        this.bs2.on('scrollEnd',() =>{
          this.loading = false;
        })  
      });
    },
  },
  computed: {
    ...mapGetters("shop", ["navList"]),
    ...mapState("shop", ["goodsList"]),
  },
  async created() {
    //发送请求
    await this.$store.dispatch("shop/A_getGoodsData");
    //渲染滚动
    this.renderScroll();
  },
};
</script>

<style lang="scss" scoped>
.page-goods {
  height: 100%;
  color: black;
}

.title {
  height: 30px;
  background: #dbdbdb;
  line-height: 30px;
  border-left: 5px solid rgb(0, 0, 0);
  text-indent: 10px;
}
</style>